<template>
  <el-row justify="center" align="middle" class="login" style="height: 100vh">
    <el-col :xs="22" :sm="14" :md="10" :lg="8" :xl="6">
      <el-card style="padding: 32px">
        <h2 style="text-align: center">注册页面</h2>
        <el-form label-position="top">
          <el-form-item label="学号">
            <el-input v-model="form.usernum"></el-input>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="form.userPhone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="form.useremail"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              v-model="form.password"
              type="password"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input
              v-model="form.repassword"
              type="password"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success" style="width: 100%" @click="register"
              >注 册</el-button
            >
          </el-form-item>
          <el-link type="primary" style="float: right" @click="router.back()"
            >已有账号？点击登录</el-link
          >
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";
import { ElMessage } from "element-plus";
const router = useRouter();
const form = ref({
  usernum: "",
  username: "",
  password: "",
  repassword: "",
  userPhone: "",
  useremail: "",
});
async function register() {
  const res = await axios.post("http://localhost:8000/Register", {
    usernum: form.value.usernum,
    username: form.value.username,
    password: form.value.password,
    repassword: form.value.repassword,
    userPhone: form.value.userPhone,
    useremail: form.value.useremail,
  });

  console.table(res);
  const data = res.data;
  if (data.code == 0) {
    if (data.msg != "") {
      ElMessage({
        message: data.msg,
        type: "success",
      });
    }
    router.push({ name: "Login" });
  }
  if (data.code !== 0) {
    ElMessage({
      message: data.msg,
      type: "error",
    });
  }
}
</script>

<style scoped>
.login {
  height: 100vh;
  background: no-repeat;
  background-image: url("@/assets/1.jpg");
  background-size: 100% 100%;
}
</style>
